/**
 * @flow
 */
import React from 'react'
import {StyleSheet, Text, TouchableOpacity} from 'react-native'
import PropTypes from 'prop-types'
import RxClick from './RxClick'
// prettier-ignore
import RxLinearGradient,
  {
    RxO_horizontal,
    RxO_vertical,
    RxO_leftTopRightBottom,
    RxO_rightTopLeftBottom,
  }
from '../view/RxLinearGradient'

const RxButtonLineBlue = props => {
  // prettier-ignore
  const {children, style, viewStyle, borderRadius, noPadding, direction, colors, onPress, text, textStyle, ...other} = props

  let chi = null
  if (children) {
    if (typeof children === 'string') {
      chi = <Text style={[styles.text, textStyle]}>{children}</Text>
    } else {
      chi = children
    }
  } else if (text && typeof text === 'string') {
    chi = <Text style={[styles.text, textStyle]}>{text}</Text>
  }

  let dir = direction
  if (direction === 'horizontal') {
    dir = RxO_horizontal
  } else if (direction === 'vertical') {
    dir = RxO_vertical
  } else if (direction === 'leftTopRightBottom') {
    dir = RxO_leftTopRightBottom
  } else if (direction === 'rightTopLeftBottom') {
    dir = RxO_rightTopLeftBottom
  }

  let mar = null
  if (noPadding === true) {
    mar = {margin: 0}
  }

  return (
    <TouchableOpacity
      {...other}
      style={[styles.container, style]}
      onPress={() => {
        console.log('RxButtonLineBlue TouchableOpacity onPress()')
        onPress && onPress()
      }}>
      <RxLinearGradient
        style={[styles.view, mar, viewStyle]}
        colors={colors}
        orientation={dir}>
        {chi}
      </RxLinearGradient>
    </TouchableOpacity>
  )
}

RxButtonLineBlue.prototype = {
  ...RxClick.prototype,
  colors: PropTypes.arrayOf([PropTypes.string]),
  borderRadius: PropTypes.number,
  text: PropTypes.string,
  viewStyle: PropTypes.any,
  direction: PropTypes.string,
  noPadding: PropTypes.bool,
}

RxButtonLineBlue.defaultProps = {
  ...RxClick.defaultProps,
  colors: ['#9bdfff', '#7ac2ff'],
  text: '',
  borderRadius: 10,
  viewStyle: null,
  direction: 'horizontal',
  noPadding: false,
}

export default RxButtonLineBlue

const styles = StyleSheet.create({
  container: {
    borderRadius: 10,
    backgroundColor: 'white',
  },
  content: {
    flex: 1,
    display: 'flex',
  },
  view: {
    margin: 10,
    flex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 4,
  },
  text: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
})
